<template>
  <div>
    <el-card>
      <template #header>
        <h2>用户列表</h2>
        <el-button type="primary" @click="$router.push({ name: 'UsersAdd' })">添加新用户</el-button>
      </template>

      <el-input v-model="searchValue">
        <template #prepend>
          <el-select v-model="searchField" style="width: 100px">
            <el-option label="用户名" value="username" />
            <el-option label="手机" value="phone" />
            <el-option label="邮箱" value="email" />
            <el-option label="角色" value="role" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="getUsers()" />
        </template>
      </el-input>

      <el-table :data="usersList" @sort-change="sortChangeHanddle">
        <el-table-column width="80" sortable="custom" label="ID" prop="id"></el-table-column>
        <el-table-column width="100" label="用户名" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email" width="200"></el-table-column>
        <el-table-column label="手机" prop="phone" width="150">
        </el-table-column>
        <el-table-column width="100" label="角色" prop="role">
        </el-table-column>
        <el-table-column label="创建" sortable="custom" prop="ctime" width="100">
          <template v-slot="{ row }">
            <el-popover placement="top" trigger="hover" :width="200">
              <template #reference>
                {{ dayjs(row.ctime).fromNow() }}
              </template>
              {{ dayjs(row.ctime).format('YYYY-MM-DD HH:mm:ss') }}
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="修改" sortable="custom" prop="mtime" width="100">
          <template v-slot="{ row }">
            <el-popover placement="top" trigger="hover" :width="200">
              <template #reference>
                {{ dayjs(row.mtime).fromNow() }}
              </template>
              {{ dayjs(row.mtime).format('YYYY-MM-DD HH:mm:ss') }}
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="primary" @click="$router.push({
          name: 'UsersEdit',
          query: { id: row.id }
        })">编辑</el-button>
            <el-button type="danger" @click="deleteUser(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <el-pagination v-model:current-page="page" v-model:page-size="pageLimit" background
          layout="prev, pager, next" :total="totalCount" @current-change="getUsers()" />
      </template>
    </el-card>
  </div>
</template>
<script setup>
/* eslint-disable import/no-extraneous-dependencies  */
/* eslint-disable no-underscore-dangle */
import { ElMessageBox } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

import { ref } from 'vue';
import { getUsersApi, deleteUsersApi } from '../../api/users';

import 'dayjs/locale/zh-cn';

dayjs.extend(relativeTime);
dayjs.locale('zh-cn');

const usersList = ref([]);
const page = ref(1);
const pageLimit = ref(5);
const totalCount = ref(0);

const searchValue = ref('');
const searchField = ref('username');

const sort = ref('id');
const order = ref('asc');

async function getUsers() {
  const where = { _page: page.value, _limit: pageLimit.value };

  if (searchValue.value && searchField.value) {
    where[searchField.value] = searchValue.value;
  }
  // 排序
  if (sort.value && order.value) {
    where._sort = sort.value;
    where._order = order.value;
  }

  const res = await getUsersApi(where);

  totalCount.value = +res.headers['x-total-count'];
  usersList.value = res.data.data;
}
getUsers();

async function deleteUser(id) {
  try {
    await ElMessageBox.confirm('删除', '确定删除吗');
    await deleteUsersApi(id);
    getUsers();
  } catch (error) {
    //
  }
}

function sortChangeHanddle(e) {
  order.value = e.order === 'ascending' ? 'asc' : 'desc';
  sort.value = e.prop;
  getUsers();
}

</script>
